{% extends 'myhome/index.html' %}
{% block title %}
<title>天天生鲜-注册</title>
{% endblock %}
{%  block shop %}
{% endblock %}
{% block main %}
<body>
	<div class="register_con">
		<div class="l_con fl">
			<a class="reg_logo"><img src="/static/myhome/images/logo02.png"></a>
			<div class="reg_slogan">足不出户  ·  新鲜每一天</div>
			<div class="reg_banner"></div>
		</div>

		<div class="r_con fr">
			<div class="reg_title clearfix">
				<h1>用户注册</h1>
				<a href="{% url 'myhome_login' %}">登录</a>
			</div>
			<div class="reg_form clearfix">
				<form method="post" action="{% url 'myhome_register' %}">
				{% csrf_token %}
				<ul>
					<li>
						<label>手机号:</label>
						<input type="text" name="phone" id="phone">
						<span class="error_tip">提示信息</span>
					</li>					
					<li>
						<label>密码:</label>
						<input type="password" name="password" id="pwd">
						<span class="error_tip">提示信息</span>
					</li>
					<li>
						<label>确认密码:</label>
						<input type="password" name="passwords" id="cpwd">
						<span class="error_tip">提示信息</span>
					</li>
					<li>
						<label>邮箱:</label>
						<input type="text" name="email" id="email">
						<span class="error_tip">提示信息</span>
					</li>
					<li>
						<label></label>
						<input type="text" name="code" placeholder="请输入手机验证码">
						<button type="button"  class="code" style="float: right;">获取验证码</button>
					</li>
					<li class="agreement">
						<input type="checkbox" name="allow" id="allow" checked="checked">
						<label>同意”天天生鲜用户使用协议“</label>
						<span class="error_tip2">提示信息</span>
					</li>
					<li class="reg_sub">
						<input type="submit" value="注 册" name="a">
					</li>
				</ul>				
				</form>
			</div>
			<script type="text/javascript">
			</script>
		</div>
	</div>
	<script type="text/javascript">
	t = 60
	function ding(){
		t--;
		$(".code").text(t+"秒后获取")
		if (t==0){
			clearInterval(a)
			$(".code").text("获取验证码")
			$(".code").attr("disabled",false)
		}
	}
	$(".code").click(function(){
		$(this).attr("disabled",true)
		a = setInterval(ding,1000)
		$.get('{% url 'myhome_sendmsg' %}',{"phone":$("#phone").val()},function(data){

		})
	})


	// 验证
		$(function(){

	var error_phone = false;
	var error_password = false;
	var error_check_password = false;
	var error_email = false;
	var error_check = false;
	var p = false

		
	$('#phone').blur(function() {
		el = $(this)
		check_phone();
		if(error_phone == false && el.val().length == 11){
			// 判断用户名存不存在
			phone = $("#phone").val()
			$.get('{% url "myhome_ajaxUser" %}',{"phone":phone},function(data){
			if (data.error == 1){
				el.siblings('span').css("color","red").html('用户名已存在');
				el.siblings('span').show();
				p = true
				
			}else{
				el.siblings('span').css("color","green").html('可以注册');
				el.siblings('span').show();
				p = false
			}
			},'json')
		}
		
	});

	$('#pwd').blur(function() {
		check_pwd();
	});

	$('#cpwd').blur(function() {
		check_cpwd();
	});

	$('#email').blur(function() {
		check_email();
	});

	$('#allow').click(function() {
		if($(this).is(':checked')){
			error_check = false;
			$(this).siblings('span').hide();
		}
		else{
			error_check = true;
			$(this).siblings('span').html('请勾选同意');
			$(this).siblings('span').show();
		}
	});


	function check_phone(){
		var vals = $('#phone').val();
		var reg = /^1[34578]\d{9}$/
		if(reg.test(vals)==false)
		{
			$('#phone').next().css("color","red").html('请输入正确的手机号码格式')
			$('#phone').next().show();
			error_phone = true;
		}
		else
		{
			$('#phone').next().hide();
			if (p){
				$('#phone').next().show();
			}
			error_phone = false;
		}
	}

	function check_pwd(){
		var len = $('#pwd').val().length;
		if(len<6||len>20)
		{
			$('#pwd').next().html('密码最少6位，最长20位')
			$('#pwd').next().show();
			error_password = true;
		}
		else
		{
			$('#pwd').next().hide();
			error_password = false;
		}		
	}


	function check_cpwd(){
		var pass = $('#pwd').val();
		var cpass = $('#cpwd').val();

		if(pass!=cpass)
		{
			$('#cpwd').next().html('两次输入的密码不一致')
			$('#cpwd').next().show();
			error_check_password = true;
		}
		else
		{
			$('#cpwd').next().hide();
			error_check_password = false;
		}		
		
	}
	function check_email(){
		var re = /^[0-9a-z]+@([0-9a-z]{2,10})+\.[0-9a-z]{2,5}$/;
		if(re.test($('#email').val()))
		{
			$('#email').next().hide();
			error_email = false;
		}
		else
		{
			$('#email').next().html('你输入的邮箱格式不正确')
			$('#email').next().show();
			error_email = true;
		}
	}
	$('.reg_sub input').click(function() {
		check_email()
		check_pwd()
		check_cpwd()
		check_phone()
		if (error_email || error_password || error_check || error_phone || error_check_password || p){
			return false
		}
	});

})
	</script>
{% endblock %}